<!DOCTYPE html>
<html>

<head>
    <title>Item Management</title>
</head>

<body>
    <h1>Item Management</h1>

    <!-- 添加新项目的表单 -->
    <form id="addItemForm">
        <input type="text" id="name" placeholder="Name" required>
        <input type="text" id="description" placeholder="Description" required>
        <button type="submit">Add Item</button>
    </form>

    <!-- 显示项目的列表 -->
    <ul id="itemList"></ul>

    <!-- JavaScript代码 -->
    <script>

        document.addEventListener('DOMContentLoaded', () => {
            const addItemForm = document.getElementById('addItemForm');
            const itemList = document.getElementById('itemList');

            // 提交表单以添加新项目
            addItemForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const name = document.getElementById('name').value;
                const description = document.getElementById('description').value;

                fetch('http://127.0.0.1:5500/api/items', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ name, description }),
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应不正常');
                        }
                        return response.json();
                    })
                    .then(() => {
                        // 刷新项目列表
                        fetchItems();
                    })
                    .catch(error => console.error('Error:', error));
            });

            // 获取并显示项目列表
            function fetchItems() {
                fetch('http://127.0.0.1:5500/api/items', {
                    method: 'GET'
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应不正常');
                        }
                        return response.json();
                    })
                    .then(data => {
                        itemList.innerHTML = '';
                        data.forEach(item => {
                            const li = document.createElement('li');
                            li.textContent = `${item.name}: ${item.description}`;
                            itemList.appendChild(li);
                        });
                    })
                    .catch(error => console.error('Error:', error));
            }

            // 初始加载项目列表
            fetchItems();
        });
    </script>
</body>

</html>

<!-- 
后端其他api还没调用，该怎么调用
    ai回答：

对于你的后端其他的 API（获取单个项目、更新项目和删除项目），你可以在前端代码中添加对应的事件监听和请求发送的逻辑来调用它们。

以下是一些基本的步骤来调用这些 API：

获取单个项目的 API：

在前端代码中，可以通过监听某个事件（例如点击某个项目）来触发获取单个项目的请求。
在事件监听函数中，使用 fetch 方法发送 GET 请求到 /api/items/:id 接口，其中 :id 是要获取的项目的 ID。
接收后端返回的数据，并进行处理（例如更新页面上的某个元素）。
更新项目的 API：

在前端代码中，可以通过监听某个事件（例如点击某个按钮）来触发更新项目的请求。
在事件监听函数中，获取要更新的项目的相关数据（例如项目的 ID、新的名称和描述等）。
使用 fetch 方法发送 PUT 请求到 /api/items/:id 接口，其中 :id 是要更新的项目的 ID，请求体中包含要更新的数据。
接收后端返回的数据，并进行处理（例如更新页面上的某个元素）。
删除项目的 API：

在前端代码中，可以通过监听某个事件（例如点击某个按钮）来触发删除项目的请求。
在事件监听函数中，获取要删除的项目的 ID。
使用 fetch 方法发送 DELETE 请求到 /api/items/:id 接口，其中 :id 是要删除的项目的 ID。
接收后端返回的数据，并进行处理（例如更新页面上的某个元素）。
以上是一些基本的步骤，你可以根据具体的业务需求和前端框架的不同，进行相应的调整和扩展。你可以通过学习相关的前端知识，了解更多关于事件监听、发送 HTTP 请求和处理响应数据的方法和技巧。一些常见的前端框架（如React、Vue等）也提供了更便捷的方法来处理这些操作。可以通过在线教程、文档和视频等资源来学习和掌握这些知识。

provided by EasyChat

例如我要删除项目，那我从这段代码中调用哪个，是delete吗？
    ai回答：
是的，要调用删除项目的 API，你需要使用 HTTP 的 DELETE 方法。在你提供的前端代码中，可以使用 fetch 方法发送 DELETE 请求来调用删除项目的 API。

具体来说，在你的前端代码中找到处理删除项目的逻辑的部分，然后添加以下代码：

// 获取要删除的项目的 ID
const itemId = // 获取要删除的项目的 ID，可以根据具体的业务逻辑来获取

// 发送 DELETE 请求到后端 API
fetch(`/api/items/${itemId}`, {
  method: 'DELETE'
})
  .then(response => {
    if (response.ok) {
      // 删除成功，进行后续处理
      // 例如更新页面上的元素或重新加载项目列表等
    } else {
      // 删除失败，进行错误处理
      // 例如显示错误信息或进行其他操作
    }
  })
  .catch(error => {
    // 发生异常，进行错误处理
    // 例如显示错误信息或进行其他操作
  });
在上述代码中，我们使用 fetch 方法发送 DELETE 请求到 /api/items/:id 接口，其中 :id 是要删除的项目的 ID。如果请求成功，可以进行后续处理，例如更新页面上的元素或重新加载项目列表等。如果请求失败或发生异常，可以进行相应的错误处理。

请注意，你需要根据你的具体业务逻辑来获取要删除的项目的 ID，并将其传递给 DELETE 请求的 URL 中。

 -->